<template>
	<view class="nav">
		<view :style="'height:' + status + 'rpx;' + containerStyle"></view>
		<view v-if="isHome" class="headNav" :style="'height:' + navHeight + 'rpx;line-height:' + navHeight + 'rpx;padding-left:20rpx'">
			<text class="city">中部地区</text>
			<view style="flex: 1">
				<navigator
					url="/pages/search/index"
					:style="
						'height:' +
						menu.height * 2 +
						'rpx;line-height:' +
						menu.height * 2 +
						'rpx;margin-top:' +
						(menu.top * 2 - status) +
						'rpx;margin-left:32rpx;margin-right:' +
						(menu.width * 2 + 24) +
						'rpx;background: #f4f4f4;border-radius:200rpx;text-align:center'
					"
				>
					<text class="search-text">找医院</text>
				</navigator>
			</view>
		</view>

		<view v-else class="navbar" :style="'height:' + navHeight + 'rpx;' + containerStyle">
			<view class="back-icon" @click="backOrHome">
				<image v-if="pages > 1" src="../../static/image/navbar/ic_back.png"></image>
				<image v-else src="../../static/image/navbar/ic_home.png"></image>
			</view>
			<view class="nav-title" v-if="titleText">
				<view :style="'height:' + navHeight + 'rpx;line-height:' + navHeight + 'rpx;' + textStyle">{{ titleText }}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onBeforeMount, defineProps, reactive } from 'vue';
const props = defineProps({
	background: {
		type: String,
		default: 'rgba(255,255,255,1)'
	},
	color: {
		type: String,
		default: 'rgba(0,0,0,1)'
	},
	fontSize: {
		type: Number,
		default: 32
	},
	iconWidth: {
		type: Number,
		default: 116
	},
	iconHeight: {
		type: Number,
		default: 38
	},
	titleText: {
		type: String,
		default: ''
	},
	isHome: {
		type: Boolean,
		default: false
	}
});
onBeforeMount(() => {
	setNavSize();
	setStyle();
});
//状态栏高度
const status = ref(0);
// 内容高度
const navHeight = ref(0);
// 背景颜色
const containerStyle = ref('');
// 字体样式
const textStyle = ref('');
// 图标样式
const iconStyle = ref('');
// 页面栈的数量
const pages = ref(getCurrentPages().length);
// 获取又右上角胶囊的位置和高度
const menu = reactive(uni.getMenuButtonBoundingClientRect());
// 计算状态栏高度
const setNavSize = () => {
	const { system, statusBarHeight } = uni.getSystemInfoSync();
	// status.value = statusBarHeight * 2;
	status.value = 40;
	const isiOS = system.indexOf('iOS') > -1;
	if (!isiOS) {
		navHeight.value = 96;
	} else {
		navHeight.value = 88;
	}
};
//样式设置
const setStyle = () => {
	containerStyle.value = ['background:' + props.background].join(';');
	textStyle.value = ['color:' + props.color, 'font-size:' + props.fontSize + 'rpx'].join(';');
	iconStyle.value = ['width:' + props.iconWidth + 'rpx', 'height:' + props.iconHeight + 'rpx'].join(';');
};
// 返回上一级或者首页
const backOrHome = () => {
	if (pages.value > 1) {
		uni.navigateBack();
	} else {
		uni.switchTab({
			url: '/pages/index/index'
		});
	}
};
</script>

<style>
.nav {
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 999;
}
.back-icon {
	display: flex;
	align-items: center;
	width: 64rpx;
	height: 100%;
}
.back-icon image {
	width: 64rpx;
	height: 64rpx;
	margin-left: 20rpx;
}
.navbar {
	position: relative;
}
.nav-title {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%);
}
.city {
	display: inline-block;
	position: relative;
	font-size: 30rpx;
	font-weight: bold;
	padding-left: 55rpx;
	background: url()
		no-repeat left center;
	background-size: 40rpx;
}

.city:after {
	content: ' ';
	display: inline-block;
	height: 6px;
	width: 6px;
	border-width: 1px 1px 0 0;
	border-color: #353535;
	border-style: solid;
	-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
	transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
	position: relative;
	top: -2px;
	position: absolute;
	top: 50%;
	margin-top: -4px;
	right: -10px;
}
.search-text {
	display: inline-block;
	padding-left: 30rpx;
	color: #bbbbbb;
	font-size: 26rpx;
	background: url()
		no-repeat left center;
	background-size: 23rpx;
}
.headNav {
	display: flex;
}
</style>
